<template>
  <view>
    <template v-if="treeData.name">
      <table>
        <tr>
          <td :colspan="Array.isArray(treeData.children) ? treeData.children.length * 2 : 1" :class="{parentLevel: Array.isArray(treeData.children) && treeData.children.length, extend: Array.isArray(treeData.children) && treeData.children.length && treeData.extend && comChildren2(treeData.children)}">
            <div :class="{node: true, hasMate: treeData.mate}">
              <div class="person" :class="Array.isArray(treeData.class) ? treeData.class : []" @click="$emit('click-node', treeData)">
                <view class="content u-f-ajc u-f-column t-a-c" :class="1 ? 'activeClass' : ''">
                  <view class="bhid padd" style="background-color: #EEC2A9;">编号：{{treeData.id}}</view>
                  <view style="background-color: #F4F4F4;">
                    <view class="padd">姓名：{{treeData.realname}}</view>
                    <view class="padd">级别：{{treeData.levelname}}</view>
                  </view>
                  <view style="background-color: #EEC5CB;width: 100%;" v-if="comyeji(treeData.children)">
                    <view class="u-f-ajc padd">累积业绩</view>
                    <view class="u-f yeji">
                      <block v-for="(item2, index2) in treeData.children" :key="index2">
                        <view class="yeji_item" v-if="item2.id != -1 && item2.id != 1">
                          <view>{{item2.realname}}：</view>
                          <view>{{item2.x_yeji}}份</view>
                        </view>
                      </block>
                    </view>
                  </view>
                  <view class="register t-a-c" v-if="comput(treeData.children)" @click="registerItem(treeData.id)">
                    <view class="padd" style="background-color: #D2DE90;width: 100%;">空点位</view>
                    <view class="padd" style="background-color: #f4f4f4;width: 100%;">注册</view>
                  </view>
                </view>
                <!-- <div class="name">{{treeData.name}}-{{treeData.id}}</div> -->
              </div>
              <template v-if="Array.isArray(treeData.mate) && treeData.mate.length">
                <div class="person" v-for="(mate, mateIndex) in treeData.mate" :key="treeData.name+mateIndex" :class="Array.isArray(mate.class) ? mate.class : []"
                  @click="$emit('click-node', mate)">
                  <div class="avat">
                    <img :src="mate.image_url" />
                  </div>
                  <div class="name">{{mate.name}}</div>
                </div>
              </template>
            </div>
            <div class="extend_handle" v-if="comChildren2(treeData.children)" @click="toggleExtend(treeData)"></div>
          </td>
        </tr>

        <tr v-if="Array.isArray(treeData.children) && treeData.children.length && treeData.extend">
          <block v-for="(children, index) in treeData.children" :key="index">
            <td colspan="2" class="childLevel" v-if="children.id!=1 && children.id!=-1">
              <TreeChart :json="children" @click-node="$emit('click-node', $event)" />
            </td>
          </block>
        </tr>
      </table>
    </template>

    <template v-if="isRegister == 1 || false">
      <view class="regis t-a-c" @click="registerItem(mid)">
        <view class="padd" style="background-color: #D2DE90;width: 100%;">空点位</view>
        <view class="padd" style="background-color: #f4f4f4;width: 100%;">注册</view>
      </view>
    </template>
  </view>
</template>

<script>
  export default {
    name: "TreeChart",
    props: ["json", "isRegister"],
    data() {
      return {
        treeData: {},
        mid: uni.getStorageSync('mid'),
      }
    },
    watch: {
      json: {
        handler: function(Props) {
          let register = {}
          let extendKey = function(jsonData) {
            jsonData.extend = (jsonData.extend === void 0 ? true : !!jsonData.extend);
            if (Array.isArray(jsonData.children)) {
              if (jsonData.children.find(item => item.id == 1)) {
                register = jsonData
              }
              jsonData.children.forEach(c => {
                extendKey(c)
              })
            }
            // return jsonData;
            return register;
          }
          
          if (Props) {
            this.treeData = extendKey(Props);
            this.toggleExtend(Props);
          }
          console.log(this.treeData)
        },
        immediate: true
      }
    },
    created() {
      // this.toggleExtend(this.treeData);
    },
    methods: {
      comyeji(children) {
        return children.some(item => item.id != 1 && item.id != -1)
      },
      comput(children) {
        return children.find(item => item.id == 1)
      },
      comChildren(children) {
        return children.every(item => item.id != 1 && item.id != -1)
      },
      comChildren2(children) {
        return children.some(item => item.id != 1 && item.id != -1)
      },
      registerItem(agentid) {
        uni.navigateTo({
          url: `/pages/team/register?agentid=${agentid}`,
        });
        console.log('查看父级id 跳转', agentid)
      },

      toggleExtend: function(treeData) {
        // console.log(treeData)
        treeData.extend = !treeData.extend;
        this.$forceUpdate();
      },
    }
  }
</script>

<style lang="scss" scoped>
  table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  td {
    position: relative;
    vertical-align: top;
    padding: 0 0 50px 0;
    text-align: center;
  }

  .extend_handle {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 10px;
    height: 10px;
    padding: 10px;
    transform: translate3d(-15px, 0, 0);
    cursor: pointer;
  }

  .extend_handle:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid;
    border-color: #ccc #ccc transparent transparent;
    transform: rotateZ(135deg);
    transform-origin: 50% 50% 0;
    transition: transform ease 300ms;
  }

  .extend_handle:hover:before {
    border-color: #333 #333 transparent transparent;
  }

  .extend .extend_handle:before {
    transform: rotateZ(-45deg);
  }

  .extend::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 15px;
    height: 15px;
    border-left: 2px solid #ccc;
    transform: translate3d(-1px, 0, 0)
  }

  .childLevel::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    height: 15px;
    border-left: 2px solid #ccc;
    transform: translate3d(-1px, 0, 0)
  }

  .childLevel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -15px;
    border-top: 2px solid #ccc;
  }

  .childLevel:first-child:before,
  .childLevel:last-child:before {
    display: none;
  }

  .childLevel:first-child:after {
    left: 50%;
    height: 15px;
    border: 2px solid;
    border-color: #ccc transparent transparent #ccc;
    border-radius: 6px 0 0 0;
    transform: translate3d(1px, 0, 0)
  }

  .childLevel:last-child:after {
    right: 50%;
    height: 15px;
    border: 2px solid;
    border-color: #ccc #ccc transparent transparent;
    border-radius: 0 6px 0 0;
    transform: translate3d(-1px, 0, 0)
  }

  .childLevel:first-child.childLevel:last-child::after {
    left: auto;
    border-radius: 0;
    border-color: transparent #ccc transparent transparent;
    transform: translate3d(1px, 0, 0)
  }

  .node {
    position: relative;
    display: inline-block;
    margin: 0 1em;
    box-sizing: border-box;
    text-align: center;
  }

  .node .person {
    position: relative;
    display: inline-block;
    z-index: 2;
    // width: 6em;
    overflow: hidden;
  }

  .node .person .avat {
    display: block;
    width: 4em;
    height: 4em;
    margin: auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  .node .person .avat img {
    width: 100%;
    height: 100%;
  }

  .node .person .name {
    height: 2em;
    line-height: 2em;
    overflow: hidden;
    width: 100%;
  }

  .node.hasMate::after {
    content: "";
    position: absolute;
    left: 2em;
    right: 2em;
    top: 2em;
    border-top: 2px solid #ccc;
    z-index: 1;
  }

  /* 横板 */
  .landscape {
    transform: translate(-100%, 0) rotate(-90deg);
    transform-origin: 100% 0;
  }

  .landscape .node {
    text-align: left;
    height: 8em;
    width: 8em;
  }

  .landscape .person {
    position: relative;
    transform: rotate(90deg);
    padding-left: 4.5em;
    height: 4em;
    top: 4em;
    left: -1em;
  }

  .landscape .person .avat {
    position: absolute;
    left: 0;
  }

  .landscape .person .name {
    height: 4em;
    line-height: 4em;
  }

  .landscape .hasMate {
    position: relative;
  }

  .landscape .hasMate .person {
    position: absolute;
  }

  .landscape .hasMate .person:first-child {
    left: auto;
    right: -4em;
  }

  .landscape .hasMate .person:last-child {
    left: -4em;
    margin-left: 0;
  }






  .content {
    width: 280rpx;
    border: 1px solid #333;

    >view {
      width: 100%;
    }

  }

  .yeji {
    width: 100%;
    font-size: 20rpx;
    flex-wrap: wrap;

    .yeji_item {
      width: 50%;
      // text-align: left;
      margin-bottom: 20rpx;
      // >view {
      //   margin-left: 60rpx;
      // }
    }
  }

  .register {
    border-top: 1px solid #333;
    // width: 30%;
    // margin: 50rpx auto 0;
  }

  .mix-tree-list {
    display: flex;
    // flex-direction: column;
    flex-wrap: wrap;
  }

  .mix-tree-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30upx;
    color: #333;
    width: 100%;
    height: 0;
    opacity: 0;
    transition: .2s;
    position: relative;
  }

  .mix-tree-item.border {
    // border-bottom: 1px solid #aaa;
  }

  .mix-tree-item.show {
    height: 400upx;
    opacity: 1;
  }

  .mix-tree-icon {
    width: 26upx;
    height: 26upx;
    margin-right: 8upx;
    opacity: .9;
  }

  .mix-tree-item.showchild:before {
    transform: rotate(90deg);
  }

  .mix-tree-item.last:before {
    opacity: 0;
  }

  .padd {
    padding: 12rpx 0;
  }

  .regis {
    width: 30%;
    border: 1px solid #333;
    margin: 0 auto;
  }

  .scroll_view_list {
    width: 100%;
    white-space: nowrap;
  }
</style>
